import Vue from "vue";
import VueRouter from "vue-router";
// 引入导航进度条的类库
import NProgress from "nprogress";
// 引入导航进入条的样式
import "nprogress/nprogress.css";

import Home from "./views/Home.vue";
import About from "./views/About.vue";

// 配置NProgress
NProgress.configure({
  showSpinner: false, // 没有转圈
});

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
    {
      path: "/setting",
      component: () => import("./views/Setting.vue"),
      meta: {
        needLogin: true,
      },
    },
    {
      path: "/jifen",
      component: () => import("./views/Jifen.vue"),
      meta: {
        needLogin: true,
      },
    },
    {
      path: "/login",
      component: () => import("./views/Login.vue"),
    },
  ],
});

// 需要登录之后才能访问的路由的路径集合
// const needLoginPaths = ["/setting", "/jife", '/hello'];

router.beforeEach((to, from, next) => {
  console.log("全局前置守卫", to);

  NProgress.start();

  // 判断当前的 to 是否在 needLoginPaths
  // if (needLoginPaths.includes(to.path)) {

  // 判断 to.meta.needLogin 是否为true
  if (to.meta.needLogin) {
    // 在，再判断登录状态
    if (window.isLogin) {
      next();
    } else {
      next({
        path: "/login",
        query: {
          redirect: to.fullPath,
        },
      });
    }
  } else {
    // 不在，直接放行
    next();
  }
});

/**
 * 全局后置守卫
 *    1. 没有 next ,因为这时导航已经完成了，你阻止不了
 *    2. 使用场景：
 *      1. 配置 beforeEach 做全局导航进度条展示效果 ， nprogress
 *      2. 实现一个页面访问统计的功能。（埋点）
 *        数据埋点的本质，在合适的时机调用后端的接口。
 */
router.afterEach((to, from) => {
  console.log("全局后置守卫", to, from);

  NProgress.done();
});

export default router;
